<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>项目管理系统</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
	
</head>

<body >  
    <div  class="taskSystem">
		<div class="leftIcon"><i></i></div>
		<div class="titleBox">项目管理系统</div>
		<div class="rightTime"><i></i><span class="timeBox">2020年10月18日</span></div>
	</div>
	<div class="bannerBox">
		<span data-src="./view/taskIndex.html">项目规划和申报</span>
		<span>项目前期</span>
		<span>项目实施准备</span>
		<div class="wrapCont"></div>
		<span data-src="planApplication.html">项目实施</span>
		<span>验收交付</span>
		<span>竣工及销项</span>
	</div>
	<div class = "homeBodyBox">
	    <iframe style = "width: 100%;height:100%" src="planApplication.html" frameborder="0" scrolling ="no" class="layadmin-iframe" name="tree" id="homeIframe" ></iframe>
	</div>
</body>
<script src="layui.js"></script>
<script src="index.js"></script>
<script>
	
    layui.config({
        base: ''
    });
    layui.use(['layer','form','element','laydate'], function () {//,'element'
        var layer = layui.layer
            , element = layui.element
            ,form = layui.form
            , $ = layui.$
            ,laydate = layui.laydate;
			
			var  url = "planApplication.html";
			baseUrl(url);
          
        //监听导航点击
        // element.on('nav(demo)', function(elem){
        //     //console.log(elem)
        //     document.cookie = elem.attr("rel-src");
        //     $("#iframe_content").attr("src",elem.attr("rel-src"));
        //     $("#relTitleText").text(elem.text());
        // });
		
		$(".timeBox").html(doHandleDate());
		function doHandleDate() {
		    var myDate = new Date();
		    var year = myDate.getFullYear();
		    var month = myDate.getMonth() + 1 < 10 ? "0" + (myDate.getMonth() + 1): myDate.getMonth() + 1; 
		    var day = myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate();
		    return  year + "年" + month + "月" + day+"日";
		}
		
		$(".bannerBox>span").on("click",function(){
			 var url = $(this).attr("data-src");
			 
			 console.log(url)
			 $(this).addClass("aBgColor").siblings().removeClass('aBgColor');
			 baseUrl(url);
		})
		
		function   baseUrl(url){
			
			 $("#homeIframe").attr("src",url);
		}
    });
</script>
<style>
	html,body{
		width:100%;
		height:100%;
		font-size:62.5%;
		/* background:#0A3269; */
		background: url(./images/taskPlan/bodyBG1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.taskSystem{
		width: 100%;
		height:10rem;
		background:url(./images/inCapital/homeBG1.png);
		background-size: 100%  100%;
		background-repeat:no-repeat;
		display: flex;
		flex-direction:row;
	}
	.leftIcon{
		width: 10%;
		height:4.5rem;
	}
	.leftIcon i{
		width:9rem;
		height:2.5rem;
		display: inline-block;
		background:url(./images/inCapital/shangHaiMetro.png);
		background-size: 100%  100%;
		margin: 0.9rem 0 0 2rem;
	}
	.titleBox{
		width: 80%;
		height:8rem;
		line-height:8rem;
		text-align: center;
		font-size:3rem;
	}
	.rightTime{
	    width:15rem;
	    height: 4.5rem;
	    line-height: 4.5rem;
	    position: absolute;
	    right: 0;
	}
	.rightTime i{
		width:3rem;
		height:3rem;
		display: inline-block;
		background:url(./images/inCapital/time.png);
		background-size: 100%  100%;
		vertical-align: middle;
		/* margin: 1.2rem 0 0 2rem; */
	}
	.timeBox{
		font-size:1.5rem;
		color: #fff;
		vertical-align: middle;
	}
	.bannerBox{
		width: 100%;
		height:5rem;
		line-height:5rem;
		position: absolute;
		top:5rem;
		left: 0;
		display: flex;
		flex-direction: row;
	}
	.wrapCont{
		width:28%;
	}

	.aBgColor{
		background: url(images/inCapital/atBg.png) !important;
		background-size: 100% 100% !important;
		background-repeat:no-repeat !important;
	}
	.homeBodyBox{
		width:100%;
		height:88%;
	}

    .bannerBox>span{
		width: 12%;
		text-align: center;
		height: 4.5rem;
		line-height: 4.5rem;
		background:url(./images/inCapital/bannerBg.png);
		background-repeat:no-repeat;
		background-size: 100%  100%;
		text-align: center;
		display: inline-block;
		margin: 0.8rem 2rem 0 2rem;
		cursor: pointer;
		font-size: 1.5rem;
	}
	.bannerBox>span:hover{
		background-image: url(images/inCapital/atBg.png);
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	

</style>
</html>